<template>
  <div class="box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="v1" v-for="(v, i) in arr" :key="i">
        <img :src="v.imgs" alt=""/>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import getlink from "../../apis/getapi";
export default {
  name: "HomeBanner",
  data() {
    return {
      arr: [],
    };
    // console.log(this.arr);
  },
  created() {
    getlink("/data/one").then((ok) => {
      //   console.log(ok);
      this.arr = ok.data.bannerImgs;
      // console.log(this.arr);
    });
    // console.log(this.arr);
  },
  props: [],
  //   data() {
  //     return {
  //       bannerImgs: [],
  //     };
  //   },
  //   created() {
  //     axios({
  //       url: "http://localhost:3000/bannerImgs",
  //       method: "get",
  //     })
  //       .then((res) => {
  //         this.bannerImgs = res.data;
  //       })
  //       .catch((err) => {
  //         console.log("err", err);
  //       });
  //   },
  //   mounted() {
  //     var swiper = new Swiper(".swiper-container", {
  //       spaceBetween: 30,
  //       centeredSlides: true,
  //       observer: true,
  //       observeParents: true,
  //       autoplay: {
  //         delay: 2500,
  //         disableOnInteraction: false,
  //       },
  //       pagination: {
  //         el: ".swiper-pagination",
  //         clickable: true,
  //       },
  //     });
  //   },
};
</script>

<style scoped>
.box {
  width: 3.55rem;
  height: 1.5rem;
  margin-left: 0.09rem;
}
.my-swipe .v1 {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
}
.v1 img{
    width: 100%;
    height: 100%;
}
</style>